<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卓子良</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <style>
        body {
            background-color: #EFFBFE;
        }

        .bg {
            width: 100%;
            height: 270px;
        }

        .bg img {
            width: 100%;
            height: 269px;
        }

        .img_wrap {
            position: absolute;
            width: 100%;
            height: 64px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            /* box-shadow: 0px 2px 90px 15px #000; */

        }

        .top-box {
            position: fixed;
            top: 0;
            left: 50%;
            z-index: 12;
            width: 100%;
            max-width: 90%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            background: 0 0;
            padding-left: 12px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-transition: all .5s;
            transition: all .5s;
        }

        .top-box .sousuo-box {
            height: 28px;
            line-height: 24px;
            padding: 2px 5px;
            border-radius: 15px;
            background-color: #fff;
            color: #666;
            font-size: .94rem;
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: relative;
        }

        .top-box .sousuo-box span {
            padding-left: 35px;
        }

        .top-box .sousuo-box span::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 35px;
            height: 100%;
            overflow: hidden;
            background: url(./img/精灵图-top.png) 15px 7px no-repeat;
            background-size: 21px auto;
            content: "";
        }

        .top-box .my {
            width: 51px;
            height: 44px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            color: #fff;
            font-size: .75rem;
            line-height: 1;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 4px;
        }

        .top-box .my:before {
            content: "\0020";
            width: 22px;
            height: 22px;
            background: url(./img/精灵图-top.png) 1px -36px no-repeat;
            background-size: 21px auto;
            margin-bottom: 1px;
            display: block;
        }

        a {
            text-decoration: none;
        }

        .nav {
            width: 95%;
            margin: 14px auto 8px;
            height: 199.56px;
            overflow: hidden;
            border-radius: 22px;
        }

        .nav .hang {
            width: 100%;
            line-height: 66.91px;
            display: flex;

        }

        .nav .hang .lie {
            flex: 23%;
            border-right: 1px solid #fff;
            box-sizing: border-box;
            padding-left: 12px;

        }

        .nav .hang .lie:nth-child(1) {
            flex: 31%;
        }

        .nav .a {
            background: linear-gradient(to right, #fa5956, #fb8650 54%);
        }

        .nav .b {
            background: linear-gradient(to right, #4b8fed, #53bced);
        }

        .nav .c {
            background: linear-gradient(to right, #34c2aa, #6cd557);
        }

        .nav a {
            color: #fff;
            /* text-decoration: none; */
        }

        .nav .a .lie:nth-child(1) {
            background: url(./img/1.png) no-repeat bottom right;
            background-size: 73px auto;
            border-top-left-radius: 8px;

        }

        .nav .a .lie:nth-child(2) {
            background: url(./img/2.png) no-repeat left bottom;
            background-size: 37px auto;
            border-top-left-radius: 8px;
        }

        .nav .a .lie:nth-child(3) {
            flex: 46%;
            background: linear-gradient(to right, #ffbc49, #ffd252);
            padding: 0;
        }

        .nav .a .lie:nth-child(3) a {
            display: block;
            background: url(./img/3.png) right bottom no-repeat;
            background-size: 161px;
            text-align: center;
            position: relative;
            width: 100%;
            color: #a05416;
        }

        .nav .b {
            margin: 1px 0;
        }

        .nav .b .lie:nth-child(1) {
            background: url(./img/4.png) no-repeat bottom right;
            background-size: 79px auto;
            border-top-left-radius: 8px;
        }

        .nav .c .lie:nth-child(1) {
            background: url(./img/5.png) no-repeat bottom right;
            background-size: 94px auto;
            border-top-left-radius: 8px;
        }

        .logo {

            overflow: hidden;
            margin: 8px auto;
            display: flex;
            flex-wrap: wrap;
            width: 90%;
            height: 100px;
        }

        .logo li {
            text-align: center;
            color: rgb(216, 23, 135);
            flex: 20%;
            /* background-color: rgba(214, 135, 135, 0.705); */
        }

        .logo li a {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-sizing: border-box;
            font-size: 12px;
            color: #222;
            line-height: 1px;
            position: relative;
            /* text-decoration: none; */

        }

        .logo li .icon {
            width: 28px;
            height: 28px;
            display: block;
            background-image: url(./img/精灵图1.png);
            background-size: 28px auto;
            background-repeat: no-repeat;
            margin-top: 4px;
            margin-bottom: 10px;

        }

        .logo li .s1 {
            background-position: 0 0px;
        }

        .logo li .s2 {
            background-position: 0 -28px;
        }

        .logo li .s3 {
            background-position: 0 -56px;
        }

        .logo li .s4 {
            background-position: 0 -84px;
        }

        .logo li .s5 {
            background-position: 0 -112px;
        }

        .logo li .s6 {
            background-position: 0 -140px;
        }

        .logo li .s7 {
            background-position: 0 -168px;
        }

        .logo li .s8 {
            background-position: 0 -196px;
        }

        .logo li .s9 {
            background-position: 0 -280px;
        }

        .logoli .s0 {
            background-position: 0 -252px;
        }

        .bottom {
            width: 100%;
            height: 60px;
            background-color: #fff;
            display: flex;
            border-top: 1px solid #cecccc8a;
            border-bottom: 1px solid #cecccc8a;

        }

        .bottom a {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            /* text-decoration: none; */
            font-size: 12px;
            color: #333;
            box-sizing: border-box;
            padding: 10px 0;
        }

        .bottom a svg {
            width: 20px;
            height: 20px;
            margin-bottom: 2px;
        }

        .nav-center {
            position: relative;
            width: 90%;
            height: 60px;
            display: flex;
            background: #fff;
            margin: -52px auto 10px;
            /* margin: 16px auto; */
            overflow: hidden;
            border-radius: 15px;

            box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
            /* align-items: center;
            justify-content: center;
            box-sizing: border-box; */

        }

        .nav-center li {
            text-align: center;
            flex: 20%;
        }

        .nav-center li a {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            box-sizing: border-box;
            position: relative;
            color: #222;
            font-size: 12px;
        }

        .nav-center li .icon-center {
            width: 40px;
            height: 40px;
            display: block;
            background-image: url(./img/精灵图.png);
            background-size: 40px auto;
            background-repeat: no-repeat;
        }

        .nav-center li .c1 {
            background-position: 0 0;
        }

        .nav-center li .c2 {
            background-position: 0 -40px;
        }

        .nav-center li .c3 {
            background-position: 0 -80px;
        }

        .nav-center li .c4 {
            background-position: 0 -120px;
        }

        .nav-center li .c5 {
            background-position: 0 -160px;
        }

        /* 底部 */

        .xxtu {
            width: 11px;
            margin-top: 4px;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: 0px -160px;
            background-size: 30px auto;
            background-image: url(./img/language.png);
            height: 11px;
        }

        .zuih {
            width: 100%;
            display: flex;
            padding-top: 10px;
            justify-content: center;
            color: #999;
        }

        .zuih a {
            color: #666666;
            font-size: 14px;
            line-height: 20px;
            display: inline-block;
            margin: 0px 8px;

            text-decoration: none;
        }

        /* input {
            outline: none;
        } */

        .bq {
            color: #999;
            display: flex;

            justify-content: center;
        }

        .bq a {
            line-height: 20px;
            display: inline-block;
            margin: 0px 6px;
            font-size: 12px;
            text-decoration: none;
            color: #999999;
        }

        .iconfont {
            display: inline-block;
            border: 1px solid #666;
            border-width: 0 1px 1px 0;
            width: 5px;
            height: 5px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
            vertical-align: 2px;
            margin: 0 3px;
        }
    </style>
</head>

<body>

    <!-- 搜索框 -->
    <div class="top-box">
        <div class="sousuo-box "><span>搜索：目的地/酒店/景点/航班号
            </span></div>
        <a href="#" class="my">
            <span>我的</span></a>
    </div>
    <!-- 背景图片 -->

    <div id="img_wrap">
        <div class="bg"><img src="./img/背景图片.jpg" alt="">
        </div>
    </div>

    <ul class="nav-center">
        <li><a href="#"><span class="icon-center  c1"></span><span>攻略·景点</span></a></li>
        <li><a href="#"><span class="icon-center  c2"></span><span>门票·活动</span></a></li>
        <li><a href="#"><span class="icon-center  c3"></span><span>美食林</span></a></li>
        <li><a href="#"><span class="icon-center  c4"></span><span>周边游</span></a></li>
        <li><a href="#"><span class="icon-center  c5"></span><span>一日游</span></a></li>
    </ul>
    <!-- 导航条1 -->
    <div class="nav">
        <div class="hang a">
            <div class="lie"><a href="#"><span>酒店</span></a></div>
            <div class="lie"><a href="#"><span>民宿·客栈</span></a></div>
            <div class="lie"><a href="#"><span>特价·爆款</span></a></div>

        </div>
        <div class="hang b">
            <div class="lie"><a href="#"><span>机票</span></a></div>
            <div class="lie"><a href="#"><span>火车票</span></a></div>
            <div class="lie"><a href="#"><span>汽车·船票</span></a></div>
            <div class="lie"><a href="#"><span>专车·出租</span></a></div>
        </div>
        <div class="hang c">
            <div class="lie"><a href="#"><span>旅游</span></a></div>
            <div class="lie"><a href="#"><span>私家团</span></a></div>
            <div class="lie"><a href="#"><span>邮轮游<span></a></div>
            <div class="lie"><a href="#"><span>定制游</span></a></div>
        </div>
    </div>
    <!-- 导航条2 -->
    <ul class="logo">
        <li><a href="#"><span class="icon s1"> </span> <span> 自由行 </span> </a></li>
        <li><a href="#"><span class="icon s2"> </span> <span> WiFi电话卡 </span> </a></li>
        <li><a href="#"><span class="icon s3"> </span> <span> 保险·签证 </span> </a></li>
        <li><a href="#"><span class="icon s4"> </span> <span> 换钞·购物 </span> </a></li>
        <li><a href="#"><span class="icon s5"> </span> <span> 向导·包车 </span> </a></li>
        <li><a href="#"><span class="icon s6"> </span> <span> 特价机票 </span> </a></li>
        <li><a href="#"><span class="icon s7"> </span> <span> 礼品卡 </span> </a></li>
        <li><a href="#"><span class="icon s8"> </span> <span> 申卡·借钱 </span> </a></li>
        <li><a href="#"><span class="icon s9"> </span> <span> 社区 </span> </a></li>
        <li><a href="#"><span class="icon s0"> </span> <span> 更多 </span> </a></li>
    </ul>


    <!-- 导航条——底部-->
    <div class="bottom"><a href="#"><svg t="1617159425233" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2062" width="20" height="20">
                <path
                    d="M434.346667 206.997333l-100.544-126.933333c-31.552-41.557333-91.776-47.274667-131.925334-15.786667L88.768 177.322667C7.936 258.026667 120.661333 474.666667 328.448 684.48l6.976 6.997333c210.773333 210.538667 427.306667 323.690667 510.485333 244.906667l105.941334-105.813333c37.269333-37.248 37.269333-97.408 0-131.776l-5.738667-5.738667-123.306667-97.386667c-37.290667-31.509333-91.797333-28.650667-126.208 5.717334l-53.056 52.992a833.749333 833.749333 0 0 1-152-116.010667c-44.458667-44.394667-81.728-94.506667-116.16-151.808l50.197334-57.301333c33.28-33.216 37.056-85.184 8.768-122.24z m347.136 437.546667l122.026666 96.426667 4.949334 4.864c10.112 9.322667 10.112 27.52-1.834667 39.445333l-105.941333 105.813333c-14.229333 13.44-61.226667 9.685333-133.888-26.090666-84.608-41.664-186.090667-118.869333-286.144-218.816-100.821333-100.693333-179.178667-203.477333-221.397334-289.024-36.202667-73.301333-39.786667-120.064-25.258666-134.592l109.653333-109.525334c12.842667-8.298667 30.506667-5.738667 39.189333 5.717334l98.304 124.181333 1.344 1.642667c9.770667 11.541333 8.96 28.309333-2.133333 39.402666l-2.901333 3.093334-80.96 92.416 24.042666 40.021333c38.485333 64.064 79.061333 117.461333 125.781334 164.138667a899.477333 899.477333 0 0 0 164.330666 125.632l42.816 25.642666 88.362667-88.256c11.157333-11.136 28.053333-11.946667 39.658667-2.133333z"
                    p-id="2063"></path>
            </svg><span>电话预定</span></a>
        <a href="#"><svg t="1617159558631" class="icon" viewBox="0 0 1126 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="2906" width="20" height="20">
                <path
                    d="M887.46051026 812.63537598c19.20684815 0 29.88555908 8.4539795 32.03613281 25.28778076l0.37078857 6.67419433c0 21.35742188-10.82702637 32.03613281-32.4810791 32.03613281H173.69250488c-19.28100586 0-29.9597168-8.4539795-32.11029053-25.28778076L141.21142578 844.67150879c0-21.35742188 10.82702637-32.03613281 32.48107911-32.03613282h713.69384765zM530.53942872 141.21142578c21.65405273 0 32.48107911 10.67871094 32.48107909 31.9619751l-0.07415771 483.50830078 128.96026611-126.95800781c13.57086182-13.34838867 27.14172364-14.83154297 40.78674317-4.44946289l5.11688232 4.44946289c15.27648926 15.05401612 15.27648926 30.10803223 0 45.23620605l-182.94708252 180.20324707-0.59326172 0.66741944a35.22491455 35.22491455 0 0 1-20.39337158 11.12365723h-5.19104004a30.77545166 30.77545166 0 0 1-15.20233154-6.67419434l-5.19104005-4.44946289-0.59326171-0.66741944-182.87292481-180.20324707c-13.57086182-13.42254638-15.05401612-26.84509278-4.44946289-40.19348144l4.44946289-5.04272461c15.35064697-15.05401612 30.62713623-15.05401612 45.97778321 0L497.9841919 655.12438965V173.17340088c0-18.91021729 8.60229492-29.44061279 25.65856933-31.59118653L530.53942872 141.21142578z"
                    p-id="2907"></path>
            </svg><span>下载客户端</span></a>
        <a href="#"><svg t="1617159634001" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="5769" width="20" height="20">
                <path d="M390.4 336.7936a162.7648 152.9344 90 1 0 305.8688 0 162.7648 152.9344 90 1 0-305.8688 0Z"
                    fill="#88def9" p-id="5770"></path>
                <path
                    d="M505.2928 525.1584c-115.7632 0-209.92-94.1568-209.92-209.92s94.1568-209.92 209.92-209.92 209.92 94.1568 209.92 209.92-94.1568 209.92-209.92 209.92z m0-368.64c-87.5008 0-158.72 71.2192-158.72 158.72s71.2192 158.72 158.72 158.72 158.72-71.2192 158.72-158.72-71.168-158.72-158.72-158.72z"
                    fill="#515151" p-id="5771"></path>
                <path
                    d="M643.84 621.7728H432.9472c-124.928 0-226.2016 101.2736-226.2016 226.2016v16.7936c0 12.7488 10.2912 23.04 23.04 23.04h617.216c12.7488 0 23.04-10.2912 23.04-23.04v-16.7936c0-124.928-101.2736-226.2016-226.2016-226.2016z"
                    fill="#88def9" p-id="5772"></path>
                <path
                    d="M829.0816 913.3568H177.6128c-36.7104 0-66.56-29.8496-66.56-66.56v-22.784c0-148.736 120.9856-269.7216 269.7216-269.7216h245.0944c148.736 0 269.7216 120.9856 269.7216 269.7216v22.784c0.0512 36.7104-29.7984 66.56-66.5088 66.56z m-448.256-307.8144c-120.5248 0-218.5216 98.048-218.5216 218.5216v22.784c0 8.448 6.912 15.36 15.36 15.36h651.4176c8.448 0 15.36-6.912 15.36-15.36v-22.784c0-120.4736-98.048-218.5216-218.5216-218.5216H380.8256z"
                    fill="#515151" p-id="5773"></path>
            </svg><span>我的</span></a>
    </div>
    <!-- 底部 -->
    <div class="zuih"><a href="">网站地图</a> | <a href=""><span class="xxtu"></span>
            Language <span class="iconfont"></span></a> | <a href="">电脑版</a>
    </div>
    <div class="bq">
        <a href="">©2021携程旅行</a> | <a href="">沪ICP备08023580号</a>
    </div>
</body>

</html>